13. HTML Graphics

I. Canvas Basics

<canvas> tag se hum 2D graphics draw kar sakte hain JavaScript ke through. Yeh tag khud koi content nahi dikhata jab tak JavaScript use draw na kare.

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#f90"; ctx.fillRect(50, 50, 200, 100); </script> Run Code

II. SVG Introduction

SVG (Scalable Vector Graphics) ek XML-based markup hota hai jo vector graphics ko web page par define karta hai. Yeh resolution-independent hota hai.

<svg width="300" height="150"> <rect x="50" y="20" width="200" height="100" fill="skyblue" stroke="black" stroke-width="2"/> <text x="100" y="80" font-size="20" fill="black">Hello SVG</text> </svg> Run Code